<link rel="stylesheet" href="../css/swiper.css">
<script src="../script/swiper.js"></script>
<style>
    .m-swiper {
        background: #000;
    }

    /* 轮播 */
    .swiper-slide {
        height: calc(100vh - 46px);
        display: flex;
        align-items: center;
        position: relative;
    }

    .swiper-container {
        overflow: hidden;
    }

    .swiper-slide img {
        width: 100%;
    }

    /* 分页器 */
    .swiper-pagination-fraction,
    .swiper-pagination-custom,
    .swiper-container-horizontal>.swiper-pagination-bullets {
        color: #fff;
        font-size: 12px;
        text-shadow: #000 0 2px 3px;
    }

    .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
        
    }

    .gaosi {
        -webkit-filter: blur(15px);
        filter: blur(15px);
        /* transform: scale(1.2); */
    }

    .tip-wrap {
        position: absolute;
        width: 100%;
        text-align: center;
        font-size: 14px;

    }

    .tip-wrap span {
        color: #fff;
        text-shadow: #000 0 2px 3px;
        /* background: rgba(0, 0, 0, 0.5);
        padding: 3px 10px; */
    }

    .fen img {
        display: none;
    }

    .fen .tip-wrap {
        background-image: url('../image/forbid.png');
        background-position: top center;
        background-size: 30px 30px;
        background-repeat: no-repeat;
    }

    .fen .tip-wrap span {
        margin-top: 35px;
    }

    .tip-btn {
        border: 1px solid;
        color: #673AB7;
        border-radius: 5px;
        padding: 7px 15px;
        margin-top: 15px;
    }
</style>

<div id="view">
    <div class="m-swiper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" :class="{'fen':m.type==0}" v-for="(m, index) in ffList" v-if="m.types==1">
                    <img :src="imgurl + m.pic[0]" :class="{'gaosi': m.burn == 1 || (Number(m.packet)>0 && m.see == 0)}">
                    <div class="tip-wrap" v-if="m.type == 0">
                        <div v-if="vip == 0">
                            <span>照片已焚毁<br>(会员可延长查看时间达6秒)</span>
                            <br>
                            <button class="tip-btn" onclick="_url({ url: 'frame4', title: '开通会员'})">马上升级会员</button>
                        </div>
                        <div v-else>
                            <span>照片已焚毁<br>
                        </div>
                    </div>
                    <div class="tip-wrap" v-else>
                        <span v-if="m.burn > 0 && Number(m.packet)==0" @click="lookImg(0, index)">阅后即焚照片<br>点击查看</span>
                        <span v-if="m.burn == 0 && (Number(m.packet)>0 && m.see == 0)" @click="lookImg(1, index)">红包照片<br>点击查看</span>
                        <span v-if="m.burn > 0 && Number(m.packet)>0" @click="lookImg(2, index)">阅后即焚的红包照片<br>点击查看</span>
                    </div>
                </div>
                <!-- <div class="swiper-slide">
                    <img src="../image/test/01.jpg">
                </div> -->
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</div>
<script>
    var imgIndex = pageParam['index'] || 0;
    var touserid = pageParam['touserid'] || myuserid;
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            vip: 0,
        },
        methods: {
            // 查看图片
            lookImg: function (type, index) {
                var _this = this;
                if(type == 0){
                    burnImg(index);
                }else if(type == 1){
                    payImg(index, function(){
                        _this.ffList[index].packet = 0;
                    });
                }else {
                    payImg(index, function(){
                        _this.ffList[index].packet = 0;
                        burnImg(index);
                    });
                }
            }
        }
    })

    _log(imgIndex);
    getUserInfo();
    xiangce();
    // 用户相册
    function xiangce() {
        _ajax('user_img_list.php', function (ret, err) {
            _log(JSON.stringify(ret));
            _log(JSON.stringify(err));
            if (ret && ret.code == 200) {
                var arr = [];
                for(var i=0,len=ret.result.length;i<len;i++){
                    if(ret.result[i].types==1){
                        arr.push(ret.result[i]);
                    }
                }
                view.ffList = arr;
                setTimeout(function () {
                    var swiper = new Swiper('.swiper-container', {
                        initialSlide: parseInt(imgIndex),
                        loop: true,
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                            type: 'fraction',
                        },
                    });
                }, 300)
            }
        }, {
            user_id: touserid,
            to_user: myuserid,
        })
    }


    // 获取用户信息
    function getUserInfo() {
        _getUser(function(ret){
            view.vip = ret.result.is_vip;
        })
    }
    // 焚毁照片
    function burnImg(index) {
        var obj = view.ffList[index];
        var time = view.vip == 0 ? 2000 : 6000;
        var id = view.ffList[index].id;
        obj.burn = 0;

        setTimeout(function(){
            obj.type = 0;
        }, time)
        
        _ajax('Home/User/burn', function (ret, err) {
            _log(JSON.stringify(ret));
        }, {
            user_id: touserid,
            to_user: myuserid,
            id: id,
        })
    }

    // 付费
    function payImg(index, callback) {
        var result = view.ffList[index];
        var data = {
            user_id: touserid,
            to_user: myuserid,
            img_id: result.id,
            price: result.packet,
        };
        var obj = {
            msg: '该图片的价格为' + result.packet + 'USDT，请确认您的操作。',
        }
        _confirm(obj, function (bIndex) {
            if (bIndex == 1) {
                _ajax('Home/User/packetimg', function(ret){
                    _log(JSON.stringify(ret));
                    if (ret.code == 200) {
                        _msg('支付成功，眼睛不要离开屏幕，图片马上出来~');
                        pushMsg(touserid);
                        if(typeof callback == 'function'){
                            callback();
                        }
                    } else {
                        _msg(ret.msg);
                    }
                }, data)
            }
        })
    }
</script>